<template>
  <section class="banner">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/strategy' }"
        >旅游攻略</el-breadcrumb-item
      >
      <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row type="flex" justify="space-between" v-if="acticleData.id">
      <el-col :span="17"
        ><div class="grid-content bg-purple">
          <h1 style="margin: 15px 0; font-size: 32px">
            {{ acticleData.title }}
          </h1>
          <hr />
          <div class="recordData">
            <span class="record"
              >攻略: <i>{{ acticleData.city.created_at }}</i
              >&nbsp;&nbsp;&nbsp; 阅读:<em>{{ acticleData.watch }}</em></span
            >
          </div>
          <p v-html="acticleData.content" class="content"></p>
          <div class="operation">
            <div class="operation_left">
              <i class="el-icon-chat-dot-round" style="font-size: 30px"></i>
              <span>评论({{ acticleData.comments.length }})</span>
            </div>
            <div class="operation_right" ref="comment">
              <i class="el-icon-share" style="font-size: 30px"></i>
              <span>分享</span>
            </div>
          </div>
        </div>
        <comment></comment>
        <comment-show @replayClick="replayClick"></comment-show>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple-light">
          相关攻略
          <div class="suggest_article" v-for="v in strategy.data" :key="v.id">
            <nuxt-link
              :to="{ path: '/strategy/acticleDetails', query: { id: v.id } }"
            >
              <div class="first_imgs">
                <div class="introduce_img" v-if="v.images[0]">
                  <img
                    :src="value"
                    v-for="value in v.images.slice(0, 1)"
                    :key="value"
                  />
                </div>
                <div class="text">
                  <p class="title">
                    {{ v.title }}
                  </p>
                  <!-- <div class="account">
                    <div class="account_left">
                      <i class="el-icon-location-outline">{{ v.cityName }}</i
                      >by
                      <span style="color: orange" @click="user"
                        ><img
                          :src="
                            $axios.defaults.baseURL + v.account.defaultAvatar
                          "
                          style="width: 15px"
                        />{{ v.account.nickname }}</span
                      >
                      <i class="el-icon-view">{{ v.watch }}</i>
                    </div>
                    <span class="account_right" style="color: orange"
                      >{{ v.like }}赞</span
                    >
                  </div> -->
                </div>
              </div>
              <div
                class="watch"
                style="
                  font-size: 14px;
                  display: flex;
                  justify-content: space-between;
                  align-content: center
                  padding: 10px;
                "
              >
                <span>{{
                  moment(v.created_at).format("YYYY-MM-DD HH:mm:ss")
                }}</span>
                <i
                  class="el-icon-view"
                  style="display: flex; align-content: center"
                  >阅读{{ v.watch }}</i
                >
              </div>
            </nuxt-link>
          </div>
        </div></el-col
      >
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      acticleData: {},
      strategy: {},
    };
  },
  methods: {
    //子传父
    replayClick() {
      console.log(this.$refs["comment"]);
      this.$refs.comment.scrollIntoView(true);
    },
    getAcritleDetails() {
      this.$axios({
        url: "/posts",
        method: "get",
        params: { id: this.$route.query.id },
      }).then((res) => {
        console.log(res);
        this.acticleData = res.data.data[0];
        console.log(this.acticleData);
      });
    },
    getRcomAcritle() {
      this.$axios({
        url: "/posts/recommend",
        method: "get",
      }).then((res) => {
        console.log(res);
        this.strategy = res.data;
      });
    },
  },
  mounted() {
    this.getAcritleDetails();
    this.getRcomAcritle();
  },
  watch: {
    "$route.query.id"() {
      this.getAcritleDetails();
      this.getRcomAcritle();
    },
  },
};
</script>

<style lang="less" scoped>
.banner {
  width: 1000px;
  margin: 20px auto 0;
  /deep/ p {
    img {
      max-width: 100% !important;
    }
  }
  .record {
    float: right;
    color: #a2a1ad;
  }
  .recordData {
    overflow: hidden;
    padding: 10px 5px;
  }
}
.el-icon-share,
.el-icon-chat-dot-round {
  color: orange;
}
.operation {
  display: flex;
  height: 120px;
  align-items: center;
  justify-content: center;
}
.operation_left,
.operation_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}
.first_imgs {
  display: flex;
  justify-content: space-between;
  align-items: initial;
  height: 85px;
  .introduce_img {
    width: 40%;
    margin-right: 5px;
    img {
      width: 100%;
      height: 85%;
    }
  }
}
.introduce_acticle {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  // "/* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 3;
  // "/* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}
.text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  // "/* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 2;
  // "/* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
  font-size: 15px;
}
.suggest_article {
  border-bottom: 1px solid #b8b8b8;
  padding: 10px 0;
}
</style>